<template>
    <div class="upload-container">
        <el-upload class="image-uploader" drag :multiple="false" :show-file-list="false" :action="uploadUrl" :on-success="handleImageScucess" :before-upload="beforeUpload">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将图片拖到此处，或
                <em>点击上传</em>
            </div>
        </el-upload>
        <div class="image-preview">
            <div class="image-preview-wrapper" v-show="imageUrl&&imageUrl.length>1">
                <img :src="imageUrl">
                <div class="image-preview-action">
                    <i @click="rmImage" class="el-icon-delete"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'singleImageUpload',
    props: {
        path: String,
        url: String
    },
    computed: {
        uploadUrl() {
            return api_url + '/common/fileupload/uploadFile?type=image'
        },
        imageUrl() {
            return this.url
        }
    },
    data() {
        return {
            // tempUrl: '',
            // dataObj: { token: '', key: '' }
        };
    },
    methods: {
        rmImage() {
            this.emitInput(null);
        },
        emitInput(data) {
            // this.$emit('path', data.path);
            this.$emit('imageData', data);
        },
        handleImageScucess(response) {
            //console.log(response);;
            this.emitInput(response.data)
        },
        beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            if (!isJPG && !isPNG) {
                this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
                return false;
            }
            return true;
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.upload-container {
    width: 100%;
    position: relative;
    @include clearfix;
    .image-uploader {
        width: 55%;
        float: left;
    }
    .image-preview {
        width: 200px;
        height: 200px;
        position: relative;
        border: 1px dashed #d9d9d9;
        float: left;
        margin-left: 50px;
        .image-preview-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .image-preview-action {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            cursor: default;
            text-align: center;
            color: #fff;
            opacity: 0;
            font-size: 20px;
            background-color: rgba(0, 0, 0, .5);
            transition: opacity .3s;
            cursor: pointer;
            text-align: center;
            line-height: 200px;
            .el-icon-delete {
                font-size: 36px;
            }
        }
        &:hover {
            .image-preview-action {
                opacity: 1;
            }
        }
    }
}
</style>
